KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) প্যাটার্ন ব্যবহার করে ডেটা বাইন্ডিং সহজ করে তোলে। KnockoutJS তে bindings ব্যবহার করে আপনি মডেল (ডেটা) এবং ভিউ (UI) এর মধ্যে শক্তিশালী সম্পর্ক তৈরি করতে পারেন, যেখানে ডেটা পরিবর্তন হলে তা UI তে স্বয়ংক্রিয়ভাবে আপডেট হয় এবং vice versa।
KnockoutJS এর bindings খুবই নমনীয় এবং কাস্টমাইজযোগ্য, যা আপনাকে ডেটা বাইন্ডিংয়ের বিভিন্ন প্রয়োজনীয়তা পূরণ করতে সহায়তা করে। এখানে KnockoutJS এর Bindings সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।
1. KnockoutJS Bindings এর মূল ধারণা
KnockoutJS তে binding মূলত একটি পদ্ধতি যা ডেটা এবং UI উপাদানের মধ্যে সম্পর্ক তৈরি করে। এতে two-way data binding এর মাধ্যমে আপনি UI তে ডেটা পরিবর্তন এবং মডেল থেকে ডেটা আপডেট করতে পারেন।
KnockoutJS তে সাধারণত দুটি ধরনের binding ব্যবহৃত হয়:
- One-way Binding: এখানে ডেটা শুধু মডেল থেকে ভিউতে যায়।
- Two-way Binding: এখানে ডেটা মডেল এবং ভিউ উভয়ের মধ্যে যায়।
2. KnockoutJS এর কিছু গুরুত্বপূর্ণ Bindings:
KnockoutJS এর বিভিন্ন ধরনের bindings রয়েছে যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডায়নামিক করে তোলে। নিচে কিছু জনপ্রিয় এবং ব্যবহৃত bindings এর উদাহরণ দেওয়া হয়েছে।
a. value Binding (Two-Way Data Binding)
এটি সাধারণত ইনপুট ফিল্ডের জন্য ব্যবহার করা হয়, যা two-way data binding কে সক্রিয় করে। অর্থাৎ, ব্যবহারকারী ইনপুট দিলে তা মডেল এবং UI উভয় জায়গায় সিঙ্ক্রোনাইজ হয়ে যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS - Value Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout.js"></script>
</head>
<body>
<div>
<label>Your Name:</label>
<input type="text" data-bind="value: name, valueUpdate: 'input'" />
<p>Hello, <span data-bind="text: name"></span>!</p>
</div>
<script>
// ViewModel
function AppViewModel() {
this.name = ko.observable("John Doe"); // Observable for two-way binding
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
data-bind="value: name"দিয়ে two-way binding ব্যবহার করা হয়েছে।valueUpdate: 'input'এর মাধ্যমে ইনপুট ফিল্ডে টাইপ করলেই তা UI তে স্বয়ংক্রিয়ভাবে আপডেট হবে।
b. text Binding (One-Way Data Binding)
এটি UI তে টেক্সট প্রদর্শন করার জন্য ব্যবহার করা হয়। এই বাইন্ডিং দিয়ে আপনি মডেল থেকে ডেটা UI তে দেখাতে পারেন।
<p>Your name is: <span data-bind="text: name"></span></p>
এখানে, text: name দিয়ে আপনি name অবজার্ভেবল এর মান UI তে প্রদর্শন করবেন।
c. visible এবং hidden Binding
এগুলি UI উপাদানগুলিকে visible বা hidden করার জন্য ব্যবহৃত হয়। visible বাইন্ডিং দিয়ে আপনি কোনো উপাদানকে দেখাতে বা লুকাতে পারেন।
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
<p data-bind="visible: isVisible">This paragraph is visible when isVisible is true.</p>
<script>
function AppViewModel() {
this.isVisible = ko.observable(true); // Initially visible
this.toggleVisibility = function() {
this.isVisible(!this.isVisible()); // Toggle visibility
};
}
ko.applyBindings(new AppViewModel());
</script>
এখানে, isVisible একটি observable যা UI তে একটি প্যারাগ্রাফ এলিমেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করবে।
d. foreach Binding (Array Binding)
এটি একটি বিশেষ binding যা আপনাকে array বা list ডেটার সাথে কাজ করতে সাহায্য করে। এটি তালিকা বা অ্যারের প্রতিটি আইটেমকে ডাইনামিকভাবে UI তে রেন্ডার করে।
<ul data-bind="foreach: items">
<li data-bind="text: $data"></li>
</ul>
<script>
function AppViewModel() {
this.items = ko.observableArray(["Apple", "Banana", "Orange"]);
}
ko.applyBindings(new AppViewModel());
</script>
এখানে, foreach: items ব্যবহার করে আপনি items অ্যারের প্রতিটি আইটেমকে li এলিমেন্টে দেখাচ্ছেন।
e. enable এবং disable Binding
এই বাইন্ডিং গুলো UI উপাদানগুলিকে সক্রিয় বা নিষ্ক্রিয় করার জন্য ব্যবহার করা হয়।
<button data-bind="enable: isEnabled">Click Me</button>
<script>
function AppViewModel() {
this.isEnabled = ko.observable(true); // Initially enabled
}
ko.applyBindings(new AppViewModel());
</script>
এখানে, isEnabled একটি observable যা UI তে button এর সক্রিয়তা নিয়ন্ত্রণ করে।
f. click Binding (Event Binding)
KnockoutJS তে click বাইন্ডিং ব্যবহার করে আপনি একটি ইভেন্ট হ্যান্ডলার অ্যাসাইন করতে পারেন। এটি একটি one-way বাইন্ডিং, যেখানে আপনি ক্লিক করার সময় একটি নির্দিষ্ট ফাংশন কল করতে পারেন।
<button data-bind="click: sayHello">Click Me</button>
<script>
function AppViewModel() {
this.sayHello = function() {
alert("Hello, Knockout!");
};
}
ko.applyBindings(new AppViewModel());
</script>
এখানে, click বাইন্ডিং ব্যবহার করে sayHello মেথড কল করা হয়েছে যখন ব্যবহারকারী বাটনে ক্লিক করবেন।
g. attr Binding (Attributes Binding)
attr বাইন্ডিং ব্যবহার করে আপনি HTML এলিমেন্টের অ্যাট্রিবিউটগুলির মান নিয়ন্ত্রণ করতে পারেন। যেমন, src, href, alt ইত্যাদি।
<img data-bind="attr: { src: imageUrl, alt: imageAltText }" />
<script>
function AppViewModel() {
this.imageUrl = ko.observable('image.jpg');
this.imageAltText = ko.observable('A beautiful image');
}
ko.applyBindings(new AppViewModel());
</script>
এখানে, attr বাইন্ডিং দ্বারা আপনি img এলিমেন্টের src এবং alt অ্যাট্রিবিউটগুলিকে observable ডেটা দ্বারা নিয়ন্ত্রণ করছেন।
3. KnockoutJS তে Custom Bindings
KnockoutJS আপনাকে custom bindings তৈরি করার সুবিধা দেয়, যাতে আপনি UI এর আরও কাস্টম ফিচার যোগ করতে পারেন। Custom bindings ব্যবহার করে আপনি নতুন ধরনের ডেটা বাইন্ডিং বা DOM ম্যানিপুলেশন করতে পারেন।
Custom Binding উদাহরণ:
<div data-bind="uppercase: name"></div>
<script>
// Custom Binding to convert text to uppercase
ko.bindingHandlers.uppercase = {
update: function(element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
element.innerText = value.toUpperCase();
}
};
function AppViewModel() {
this.name = ko.observable('John Doe');
}
ko.applyBindings(new AppViewModel());
</script>
এখানে, uppercase নামে একটি কাস্টম বাইন্ডিং তৈরি করা হয়েছে, যা টেক্সটকে uppercase তে কনভার্ট করবে। update মেথডের মাধ্যমে এই কাস্টম বাইন্ডিং টেক্সট কনভার্সন করিয়ে দেয়।
KnockoutJS Bindings আপনাকে ডেটা এবং UI উপাদানগুলির মধ্যে শক্তিশালী সম্পর্ক স্থাপন করতে সাহায্য করে, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডায়নামিক করে তোলে। Two-way data binding, custom bindings, array bindings, এবং event bindings এর মাধ্যমে আপনি ব্যবহারকারীর ইন্টারঅ্যাকশন এবং ডেটা পরিবর্তনকে সহজেই ট্র্যাক এবং ম্যানিপুলেট করতে পারেন। KnockoutJS এর বাইন্ডিং ব্যবহারের মাধ্যমে আপনার ওয়েব অ্যাপ্লিকেশন আরও কার্যকরী এবং পুনঃব্যবহারযোগ্য হয়ে উঠবে।
KnockoutJS একটি JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) ডিজাইন প্যাটার্ন অনুসরণ করে এবং এটি data-binding এবং dependency tracking ফিচার প্রদান করে। KnockoutJS এর সাহায্যে আপনি সহজেই UI কে ডেটার সাথে বাঁধতে পারেন এবং স্বয়ংক্রিয়ভাবে UI আপডেট করতে পারেন। Text Binding, HTML Binding, এবং CSS Binding হল KnockoutJS এর কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য যা ব্যবহারকারীর ইন্টারফেসের সাথে ডেটার সম্পর্ক তৈরি করতে সহায়তা করে।
এই গাইডে, Text Binding, HTML Binding, এবং CSS Binding এর ব্যবহার এবং তাদের কিভাবে আপনার KnockoutJS অ্যাপ্লিকেশনে প্রয়োগ করা যায় তা আলোচনা করা হবে।
1. Text Binding (টেক্সট বাইন্ডিং):
Text Binding KnockoutJS এর একটি সাধারণ এবং সবচেয়ে ব্যবহৃত বৈশিষ্ট্য। এটি ব্যবহার করে আপনি একটি observable বা সাধারণ JavaScript ভেরিয়েবলের মানকে HTML এলিমেন্টে display করতে পারেন।
Text Binding Syntax:
KnockoutJS তে text বাইনডিং ব্যবহার করে আপনি একটি observable বা একটি সাধারণ ভেরিয়েবলের মান HTML এলিমেন্টের মধ্যে বেঁধে দিতে পারেন।
<p data-bind="text: name"></p>
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Text Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>KnockoutJS Text Binding Example</h2>
<p data-bind="text: name"></p>
<input type="text" data-bind="value: name, valueUpdate: 'input'" />
<script>
function AppViewModel() {
this.name = ko.observable("John Doe"); // 'name' একটি observable
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
data-bind="text: name": এটি name observable এর মানকে<p>ট্যাগে দেখাবে।value: name: ইনপুট ফিল্ডে name এর মান অ্যাসাইন করা হয়েছে, এবং ইনপুট পরিবর্তন হলে name এর মান আপডেট হবে।
এখন, যখন আপনি ইনপুট ফিল্ডে name পরিবর্তন করবেন, তখন টেক্সটটিও স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।
2. HTML Binding (এইচটিএমএল বাইন্ডিং):
HTML Binding KnockoutJS এর মাধ্যমে আপনি HTML কনটেন্ট বা এভেন্ট হ্যান্ডলিং ইত্যাদি কাস্টমাইজ করতে পারেন। এটি innerHTML এবং অন্যান্য HTML ডাটা প্রপার্টি সরাসরি কন্ট্রোল করতে সাহায্য করে।
HTML Binding Syntax:
<p data-bind="html: myHtmlContent"></p>
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS HTML Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>KnockoutJS HTML Binding Example</h2>
<p data-bind="html: description"></p>
<input type="text" data-bind="value: description, valueUpdate: 'input'" />
<script>
function AppViewModel() {
this.description = ko.observable("<strong>This is a <em>dynamic</em> description!</strong>");
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
data-bind="html: description": এটি description observable এর HTML কনটেন্টকে<p>ট্যাগে যোগ করবে।value: description: ইনপুট ফিল্ডে description এর মান থাকবে এবং আপনি ইনপুট ফিল্ডে এর মান পরিবর্তন করলে HTML কন্টেন্ট স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।
এটি HTML tags যেমন strong, em ইত্যাদি ডাইনামিকভাবে রেন্ডার করার জন্য ব্যবহৃত হয়।
3. CSS Binding (সিএসএস বাইন্ডিং):
CSS Binding ব্যবহার করে আপনি KnockoutJS তে একটি HTML এলিমেন্টের স্টাইল বা CSS ক্লাসগুলোকে observable বা ডাইনামিক ডেটার সাথে যুক্ত করতে পারেন। এটি ডেটার উপর ভিত্তি করে একটি এলিমেন্টের সিএসএস প্রপার্টি বা ক্লাস যোগ বা অপসারণ করতে ব্যবহৃত হয়।
CSS Binding Syntax:
<div data-bind="css: { active: isActive }"></div>
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS CSS Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<style>
.active {
color: green;
font-weight: bold;
}
.inactive {
color: gray;
}
</style>
</head>
<body>
<h2>KnockoutJS CSS Binding Example</h2>
<button data-bind="click: toggleActive">Toggle Active</button>
<div data-bind="css: { active: isActive, inactive: !isActive }">
This is a dynamic styled text.
</div>
<script>
function AppViewModel() {
this.isActive = ko.observable(true); // Observable to track the active state
// Function to toggle isActive value
this.toggleActive = () => {
this.isActive(!this.isActive()); // Toggle the value of isActive
};
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
css: { active: isActive, inactive: !isActive }: এটি CSS ক্লাস যোগ করার জন্য ব্যবহার করা হয়েছে। যদিisActiveসত্য হয়, তবে active ক্লাস যোগ হবে এবং inactive ক্লাসটি সরিয়ে ফেলা হবে।click: toggleActive: এটি isActive মান পরিবর্তন করার জন্য একটি বাটন ব্যবহার করছে।
এটি ইউজার ইন্টারঅ্যাকশনের ভিত্তিতে একটি এলিমেন্টের স্টাইল পরিবর্তন করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি বাটনে ক্লিক করলে টেক্সটের স্টাইল পরিবর্তিত হবে।
4. Additional Examples and Practical Use:
KnockoutJS তে Text Binding, HTML Binding, এবং CSS Binding এর মাধ্যমে আপনি ডেটার উপর ভিত্তি করে UI কে পরিবর্তন করতে পারেন। এসব প্রযুক্তি ফিচারের মাধ্যমে আপনি অ্যাপ্লিকেশনের ইন্টারফেসকে ডাইনামিক এবং ইন্টারঅ্যাকটিভ করতে পারবেন।
Example: Conditional Rendering with CSS Binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<style>
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<h2>KnockoutJS Example with CSS Binding</h2>
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
<div data-bind="css: { show: isVisible, hide: !isVisible }">
This is a toggleable content block.
</div>
<script>
function AppViewModel() {
this.isVisible = ko.observable(true); // Observable to track visibility
// Function to toggle visibility
this.toggleVisibility = () => {
this.isVisible(!this.isVisible()); // Toggle the visibility
};
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
- CSS Binding ব্যবহার করে আপনি
showএবংhideক্লাস গুলি শর্তসাপেক্ষভাবে যোগ বা সরাতে পারেন, এবং এতে করে div এলিমেন্টটি দৃশ্যমান বা অদৃশ্য হতে থাকবে।
KnockoutJS তে Text Binding, HTML Binding, এবং CSS Binding ব্যবহারের মাধ্যমে আপনি UI কে ডেটার সাথে খুব সহজেই ইন্টারঅ্যাক্ট করতে পারেন। এই বাইনডিংগুলি dynamic data-driven interfaces তৈরি করতে সহায়তা করে এবং ব্যবহারকারীর ইন্টারঅ্যাকশন এবং ডেটার ভিত্তিতে UI তে পরিবর্তন আনে।
KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) ডিজাইন প্যাটার্ন অনুসরণ করে। KnockoutJS এর মধ্যে data-binding এর সাহায্যে ডেটা এবং UI এর মধ্যে সম্পর্ক স্থাপন করা হয়। এর মধ্যে visible এবং hidden bindings খুবই গুরুত্বপূর্ণ, কারণ এগুলির মাধ্যমে আপনি UI উপাদানগুলোকে দৃশ্যমান (visible) অথবা অদৃশ্য (hidden) করতে পারেন, নির্ভর করে কোন ডেটার মান বা শর্তের উপর।
এখানে KnockoutJS তে visible এবং hidden bindings এর ব্যবহার নিয়ে আলোচনা করা হয়েছে।
1. visible Binding:
visible binding এর মাধ্যমে আপনি একটি HTML এলিমেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন। যখন নির্দিষ্ট শর্ত পূর্ণ হয়, তখন সেই এলিমেন্ট দৃশ্যমান হবে, আর শর্তটি পূর্ণ না হলে এলিমেন্টটি অদৃশ্য হবে (বাটারফ্লাই প্রভাবের মতো)।
visible Binding ব্যবহার:
<p data-bind="visible: isVisible">This paragraph is visible or hidden based on the value of isVisible.</p>
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
function AppViewModel() {
this.isVisible = ko.observable(true); // Initially the element is visible
// Method to toggle visibility
this.toggleVisibility = () => {
this.isVisible(!this.isVisible()); // Toggles between true and false
};
}
ko.applyBindings(new AppViewModel());
এখানে:
data-bind="visible: isVisible": এটিisVisibleobservable এর মান অনুযায়ী<p>ট্যাগের দৃশ্যমানতা নিয়ন্ত্রণ করবে।toggleVisibilityমেথডটিisVisibleএর মান পরিবর্তন করবে, যা<p>ট্যাগটি দৃশ্যমান বা অদৃশ্য করবে।
এখন, <p> ট্যাগটি isVisible এর মান অনুযায়ী ভিজিবল বা হিডেন হবে।
2. hidden Binding:
hidden binding visible binding এর বিপরীত, যেখানে এলিমেন্টটি শুধুমাত্র তখনই দৃশ্যমান হবে না, যখন শর্তটি পূর্ণ হয়। যদি শর্তটি পূর্ণ না হয়, তবে এলিমেন্টটি অদৃশ্য (hidden) হয়ে যাবে।
hidden Binding ব্যবহার:
<p data-bind="hidden: isHidden">This paragraph is hidden or shown based on the value of isHidden.</p>
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
function AppViewModel() {
this.isHidden = ko.observable(true); // Initially the element is hidden
// Method to toggle visibility
this.toggleVisibility = () => {
this.isHidden(!this.isHidden()); // Toggles between true and false
};
}
ko.applyBindings(new AppViewModel());
এখানে:
data-bind="hidden: isHidden": এটিisHiddenobservable এর মান অনুযায়ী<p>ট্যাগের গোপনীয়তা (visibility) নিয়ন্ত্রণ করবে।toggleVisibilityমেথডটিisHiddenএর মান পরিবর্তন করবে, যা<p>ট্যাগটি হিডেন বা শো করবে।
এখন, <p> ট্যাগটি isHidden এর মান অনুযায়ী হিডেন বা ভিজিবল হবে।
3. visible এবং hidden Binding এর মধ্যে পার্থক্য:
| বিশেষত্ব | visible Binding | hidden Binding |
|---|---|---|
| কাজ | UI উপাদানকে দৃশ্যমান (visible) বা অদৃশ্য (hidden) করে। | UI উপাদানকে অদৃশ্য (hidden) বা দৃশ্যমান (visible) করে। |
| ডিফল্ট আচরণ | উপাদানটি দৃশ্যমান বা অদৃশ্য হয় নির্ভর করে observable এর মান। | উপাদানটি অদৃশ্য বা দৃশ্যমান হয় নির্ভর করে observable এর মান। |
| স্টাইলিং | display: none; ব্যবহার করা হয় যখন উপাদানটি অদৃশ্য থাকে। | visibility: hidden; ব্যবহার করা হয় যখন উপাদানটি অদৃশ্য থাকে। |
| আচরণ | visible এর জন্য উপাদানটি DOM থেকে সরানো হয় না। | hidden এর জন্য উপাদানটি visibility প্রোপার্টি পরিবর্তন করে। |
4. UI তে visible এবং hidden Binding এর উদাহরণ:
visible Binding উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS visible binding example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Click the button to toggle the visibility of the text</h2>
<!-- Text visibility controlled by isVisible observable -->
<p data-bind="visible: isVisible">This paragraph is visible when isVisible is true.</p>
<!-- Button to toggle visibility -->
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
<script>
function AppViewModel() {
this.isVisible = ko.observable(true); // Initially visible
// Method to toggle visibility
this.toggleVisibility = () => {
this.isVisible(!this.isVisible()); // Toggle between true and false
};
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
isVisibleএর মান পরিবর্তন করার মাধ্যমে প্যারাগ্রাফটি দৃশ্যমান বা অদৃশ্য হবে।
hidden Binding উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS hidden binding example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>Click the button to toggle the hidden status of the text</h2>
<!-- Text visibility controlled by isHidden observable -->
<p data-bind="hidden: isHidden">This paragraph is hidden when isHidden is true.</p>
<!-- Button to toggle hidden status -->
<button data-bind="click: toggleVisibility">Toggle Hidden</button>
<script>
function AppViewModel() {
this.isHidden = ko.observable(true); // Initially hidden
// Method to toggle hidden status
this.toggleVisibility = () => {
this.isHidden(!this.isHidden()); // Toggle between true and false
};
}
// Apply Knockout bindings
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
isHiddenএর মান পরিবর্তন করার মাধ্যমে প্যারাগ্রাফটি গোপন বা দৃশ্যমান হবে।
KnockoutJS তে visible এবং hidden bindings খুবই কার্যকরী ফিচার, যা আপনার UI এর অংশগুলির দৃশ্যমানতা নিয়ন্ত্রণ করতে সহায়তা করে। visible binding দ্বারা আপনি কোন উপাদান দৃশ্যমান করতে বা গোপন করতে পারেন যখন ডেটার মান নির্দিষ্ট শর্ত পূর্ণ হয়, এবং hidden binding দ্বারা আপনি উপাদানটি গোপন করে রাখতে পারেন, যখন নির্দিষ্ট শর্ত পূর্ণ না হয়। এই ফিচারগুলি ইউজার ইন্টারফেসের ডায়নামিক আচরণ তৈরি করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।
KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা data-binding এবং dependency tracking এর মাধ্যমে ডাইনামিক ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। KnockoutJS তে style এবং class এর সাথে data-binding ব্যবহার করা যায়, যা আপনাকে ইউজার ইন্টারফেসে বিভিন্ন স্টাইল এবং CSS ক্লাসকে ডেটার সাথে সিঙ্ক্রোনাইজ করার সুবিধা দেয়।
এখানে KnockoutJS তে Style Binding এবং Class Binding ব্যবহারের বিস্তারিত আলোচনা করা হয়েছে।
1. Style Binding in KnockoutJS
Style binding ব্যবহার করে আপনি HTML এলিমেন্টের CSS styles কে একটি observable বা computed observable এর মানের সাথে যুক্ত করতে পারেন। এর মাধ্যমে আপনি UI-এ রিয়েল-টাইমে স্টাইল পরিবর্তন করতে পারেন, যখন ডেটা পরিবর্তিত হয়।
Style Binding Syntax:
<div data-bind="style: { color: color, backgroundColor: bgColor }">
This is a styled div!
</div>
এখানে:
data-bind="style"দ্বারা আপনি CSS styles এর সাথে ডেটাকে বাইন্ড করছেন।colorএবংbackgroundColorহল CSS স্টাইল প্রপার্টি যা observable এর মানের সঙ্গে সিঙ্ক্রোনাইজ হবে।
Style Binding Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Style Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<div>
<label for="color">Choose Text Color:</label>
<input type="color" id="color" data-bind="value: color, valueUpdate: 'input'">
</div>
<div data-bind="style: { color: color }">
This text will change color dynamically.
</div>
<script>
function AppViewModel() {
this.color = ko.observable('#000000'); // Default color
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
colorএকটি observable যা HTML ইনপুট ফিল্ডে নির্বাচিত রঙকে ট্র্যাক করছে।data-bind="style: { color: color }"দ্বারা div ট্যাগের টেক্সটের রঙ পরিবর্তন করা হচ্ছে, যেটি color observable এর মানের উপর নির্ভরশীল।
2. Class Binding in KnockoutJS
Class binding এর মাধ্যমে আপনি HTML এলিমেন্টের CSS classes কে ডেটার সাথে সিঙ্ক্রোনাইজ করতে পারেন। এটি ডাইনামিকভাবে ক্লাস যোগ বা মুছে ফেলতে ব্যবহৃত হয়, যখন ডেটার মান পরিবর্তিত হয়।
Class Binding Syntax:
<div data-bind="css: { 'highlight': isHighlighted }">
This is a div with dynamic class.
</div>
এখানে:
data-bind="css"দ্বারা আপনি CSS classes এর সাথে observable এর মান সিঙ্ক্রোনাইজ করছেন।'highlight': isHighlightedএখানেhighlightCSS ক্লাস যোগ করা হবে, যদি isHighlighted observabletrueহয়।
Class Binding Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Class Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<label for="highlightToggle">Highlight Text:</label>
<input type="checkbox" id="highlightToggle" data-bind="checked: isHighlighted">
</div>
<div data-bind="css: { 'highlight': isHighlighted }">
This text will be highlighted when the checkbox is checked.
</div>
<script>
function AppViewModel() {
this.isHighlighted = ko.observable(false); // Default state is false
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
isHighlightedএকটি observable যা চেকবক্সের মান ট্র্যাক করছে। যখন চেকবক্স চেক করা হয়, তখনhighlightক্লাসটি div-এ যোগ হয়ে যাবে, যা এর ব্যাকগ্রাউন্ড এবং ফন্ট স্টাইল পরিবর্তন করবে।
3. Style and Class Binding with Dynamic Expressions
KnockoutJS তে আপনি conditional expressions ব্যবহার করে style এবং class বাইন্ডিং করতে পারেন, যেখানে শর্ত অনুযায়ী স্টাইল বা ক্লাস অ্যাপ্লাই করা হবে।
Example: Dynamic Class and Style Binding:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Style and Class Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<style>
.positive {
color: green;
}
.negative {
color: red;
}
</style>
</head>
<body>
<div>
<label for="numberInput">Enter a number:</label>
<input type="number" id="numberInput" data-bind="value: number, valueUpdate: 'input'">
</div>
<div data-bind="css: { 'positive': isPositive, 'negative': !isPositive }, style: { fontSize: fontSize }">
The number is: <span data-bind="text: number"></span>
</div>
<script>
function AppViewModel() {
var self = this;
self.number = ko.observable(0); // Default number is 0
self.isPositive = ko.computed(function() {
return self.number() > 0; // Check if the number is positive
});
self.fontSize = ko.computed(function() {
return self.number() > 0 ? '20px' : '16px'; // Change font size based on number
});
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
cssbinding এর মাধ্যমে, আপনি positive বা negative ক্লাস যোগ করছেন, নির্ভর করে ইউজার যে সংখ্যা ইনপুট করেছেন তা ধনাত্মক (positive) না নেতিবাচক (negative)।stylebinding এর মাধ্যমে, ইনপুট নাম্বারের উপর ভিত্তি করে fontSize পরিবর্তিত হচ্ছে।
সারাংশ:
- Style Binding:
- Style binding ব্যবহার করে আপনি UI-এ সরাসরি CSS স্টাইল প্রয়োগ করতে পারেন, যেখানে observable এর মান পরিবর্তন হলে স্টাইলও আপডেট হয়।
- এটি আপনার অ্যাপ্লিকেশনকে রিয়েল-টাইম স্টাইল আপডেট করার ক্ষমতা প্রদান করে।
- Class Binding:
- Class binding ব্যবহার করে আপনি UI এলিমেন্টগুলিতে CSS ক্লাস যোগ বা মুছে ফেলতে পারেন, যা ডেটার মানের উপর নির্ভরশীল হয়।
- এটি ডাইনামিক ক্লাস ম্যানিপুলেশনের মাধ্যমে UI তে পরিবর্তন আনতে সাহায্য করে।
- Conditional Style/Class Binding:
- KnockoutJS এ conditional expressions ব্যবহার করে আপনি UI তে ক্লাস বা স্টাইল শর্তসাপেক্ষে অ্যাপ্লাই করতে পারেন।
KnockoutJS এর style এবং class binding এর মাধ্যমে আপনি আপনার ইউজার ইন্টারফেসকে অত্যন্ত ডাইনামিক এবং রিয়েল-টাইমে ইন্টারঅ্যাকটিভ করতে পারবেন।
KnockoutJS তে Event Binding এবং Click Binding খুবই গুরুত্বপূর্ণ ফিচার, যা আপনাকে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। Event Binding এর মাধ্যমে আপনি UI ইভেন্ট (যেমন, ক্লিক, মাউস হোভার, কীবোর্ড ইত্যাদি) এবং Click Binding এর মাধ্যমে ইউজারের click ইভেন্ট ট্র্যাক এবং হ্যান্ডেল করতে পারেন।
1. Event Binding in KnockoutJS
KnockoutJS তে Event Binding ব্যবহার করে আপনি UI ইভেন্টগুলোকে ডেটা মডেলের সঙ্গে বাইন্ড করতে পারেন। এটি data-bind অ্যাট্রিবিউট ব্যবহার করে করা হয়। আপনি বিভিন্ন ইভেন্ট যেমন click, hover, keydown, keyup ইত্যাদির জন্য বাইন্ডিং ব্যবহার করতে পারেন।
KnockoutJS তে ইভেন্ট বাইন্ডিং করতে আপনি eventname: handlerFunction ফরম্যাট ব্যবহার করবেন, যেখানে eventname হল ইভেন্ট (যেমন click, mouseover), এবং handlerFunction হল সেই ইভেন্ট ট্রিগার হলে কল হবে এমন একটি ফাংশন।
1.1. Basic Event Binding Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Binding Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<button data-bind="click: changeMessage">Click Me</button>
<p data-bind="text: message"></p>
<script>
// ViewModel
function ViewModel() {
this.message = ko.observable("Hello, Knockout!");
this.changeMessage = function() {
this.message("You clicked the button!");
};
}
// Apply bindings
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
এখানে:
data-bind="click: changeMessage": বাটনে click ইভেন্ট বাইন্ডিং করা হয়েছে। যখন বাটনটিতে ক্লিক করা হবে, তখনchangeMessageফাংশন কল হবে।this.message("You clicked the button!"): এই ফাংশনটি message নামক observable এর মান পরিবর্তন করবে, এবং UI তে সেই পরিবর্তন প্রতিফলিত হবে।
1.2. Event Binding for Other Events:
KnockoutJS তে Event Binding শুধু click ইভেন্টের জন্য নয়, অন্যান্য ইভেন্টের জন্যও ব্যবহার করা যায়, যেমন mouseenter, mouseleave, mouseover, keydown, keyup ইত্যাদি।
Example:
<input type="text" data-bind="event: { focus: focusHandler, blur: blurHandler }" />
<script>
function ViewModel() {
this.focusHandler = function() {
alert("Input field is focused!");
};
this.blurHandler = function() {
alert("Input field lost focus!");
};
}
ko.applyBindings(new ViewModel());
</script>
এখানে:
focusএবংblurইভেন্টগুলোকেfocusHandlerএবংblurHandlerফাংশনের সাথে বাইন্ড করা হয়েছে।
2. Click Binding in KnockoutJS
Click Binding হল KnockoutJS এর একটি বিশেষ ধরনের event binding যা button, link, বা অন্য যেকোনো ইন্টারঅ্যাক্টিভ উপাদানের জন্য ব্যবহৃত হয়। যখন ইউজার কোনো বাটনে ক্লিক করে, তখন আপনি একটি ফাংশন কল করতে পারেন। এটি সাধারণত two-way data binding এর সাথে ব্যবহৃত হয় যাতে ইউজারের ইন্টারঅ্যাকশন UI তে প্রতিফলিত হয়।
2.1. Basic Click Binding Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Binding Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<button data-bind="click: incrementCount">Click to Increment</button>
<p data-bind="text: count"></p>
<script>
function ViewModel() {
this.count = ko.observable(0); // Initial count set to 0
// Function to increment the count when button is clicked
this.incrementCount = function() {
this.count(this.count() + 1); // Increment the observable count
};
}
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
এখানে:
data-bind="click: incrementCount": বাটনটি click ইভেন্টের জন্যincrementCountফাংশনকে বাইন্ড করে।this.count(this.count() + 1): যখন বাটনে ক্লিক করা হবে, তখন count এর মান ১ বাড়বে এবং UI তে তা প্রতিফলিত হবে।
2.2. Handling Multiple Events with Click Binding:
একই click ইভেন্টের মধ্যে একাধিক কার্যকলাপ (multiple actions) ট্রিগার করা যেতে পারে। এতে multiple handlers ব্যবহার করা হয়।
Example:
<button data-bind="click: handleClick">Click Me</button>
<script>
function ViewModel() {
this.handleClick = function() {
alert("Button clicked!");
console.log("Click event handled.");
};
}
ko.applyBindings(new ViewModel());
</script>
এখানে:
handleClickফাংশনটি বাটনে ক্লিক করা হলে দুটি কাজ করবে:- Alert প্রদর্শন করবে।
- Console এ একটি বার্তা লগ করবে।
2.3. Passing Parameters to Click Binding:
KnockoutJS তে click binding ব্যবহার করে আপনি ফাংশনের মধ্যে আর্গুমেন্ট (parameter) পাস করতে পারেন।
Example:
<button data-bind="click: function() { sayHello('Knockout') }">Say Hello</button>
<script>
function ViewModel() {
this.sayHello = function(name) {
alert("Hello, " + name + "!");
};
}
ko.applyBindings(new ViewModel());
</script>
এখানে:
sayHello('Knockout'): click ইভেন্টের মাধ্যমে sayHello ফাংশনে"Knockout"প্যারামিটার পাস করা হচ্ছে।
3. Advanced Usage: Event Binding with Parameters
KnockoutJS তে event binding এবং click binding আরও শক্তিশালী এবং নমনীয়ভাবে কাজ করতে পারে যখন আপনি কাস্টম ফাংশন ব্যবহার করেন বা model parameters পাস করেন।
Example:
<ul data-bind="foreach: items">
<li>
<span data-bind="text: name"></span>
<button data-bind="click: $parent.removeItem">Remove</button>
</li>
</ul>
<script>
function ViewModel() {
this.items = ko.observableArray([
{ name: "Item 1" },
{ name: "Item 2" },
{ name: "Item 3" }
]);
this.removeItem = function(item) {
this.items.remove(item);
};
}
ko.applyBindings(new ViewModel());
</script>
এখানে:
$parent.removeItem:$parentব্যবহার করে আপনি প্যারেন্ট ভিউমডেলকে অ্যাক্সেস করতে পারেন এবং একটি ফাংশন কল করতে পারেন।removeItemফাংশন একটি আইটেম মুছে ফেলে এবং observable array থেকে তা সরিয়ে দেয়।
সারাংশ:
- Event Binding এবং Click Binding KnockoutJS এর দুটি প্রধান ফিচার, যা ইন্টারঅ্যাকটিভ এবং ডাইনামিক ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে।
data-bindঅ্যাট্রিবিউট ব্যবহার করে আপনি ইভেন্টগুলো যেমন click, mouseover, keyup ইত্যাদি observable functions এর সাথে বাইন্ড করতে পারেন।- Click Binding সহজেই ইউজারের ক্লিক ইভেন্ট হ্যান্ডেল করতে সহায়তা করে, এবং আপনি parameters পাস করে ফাংশনকে আরও নমনীয়ভাবে কনফিগার করতে পারেন।
- KnockoutJS তে event binding এর মাধ্যমে বিভিন্ন ইভেন্ট ট্র্যাক করা এবং প্রোগ্রামেটিক্যালি সেই ইভেন্টগুলির প্রতিক্রিয়া প্রকাশ করা সম্ভব।
এভাবে, KnockoutJS এর event binding এবং click binding ব্যবহারের মাধ্যমে আপনি কার্যকরী এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।
Read more
